
<template>
	<view class="s-back subscribe">
        <view class="flex" :style="{
			paddingTop:statusbarHeight + 12 +'px'
		}">
			<view class="text1">
				<uni-icons type="back" size="25" @click="goBack" color="#fff"></uni-icons>
			
			</view>
			<view class="flex1">订阅中心</view>
			<view class="right" style="visibility: hidden;">恢复订阅</view>		
        </view>
		<!-- <view class="blo2">
			您还不是VIP会员
		</view> -->
		<!-- <view class="block1" id="scroll">
			<view class="blo4" :id="'blo'+idx" v-for="(item,idx) in data" :key="idx"><u-avatar :src="item.avatar" size="60"></u-avatar>
				<text class="blo3">{{ item.name }} 于{{ item.time }}分钟前开通月会员</text>
			</view>

		</view> -->
		<view class="subscribe-back">
			<image src="/static/img/vip.png" class="subscribe-posi"></image>
		<view class="blo5">
			<view class="lin1" style="margin-top: 0px;">VIP会员</view>
			<view class="lin2">升级解锁全部功能</view>
		</view>
		<view class="blo6">
			<view class="item1" v-for="(item,idx) in funcList" :key="idx">
				<view class="text1">
					<image class="subscribe-img" :src="'/static/img/'+(idx+1)+'.png'"></image>
					{{ 
					item.name
				}}</view>
				<view class="text2">{{ 
					item.tip
				}}</view>
				
			</view>
		</view>

	

		<view class="block1" id="scroll1">
			<view :style="{
				marginLeft:idx==0?'24rpx':''
			}" class="blo7" @tap="choosePrice(idx)" v-for="(item,idx) in priceList" :key="idx">
				<view :class="activeIdx==idx?'box1':'box1 box2'">
					<view class="name1">{{ item.title||'默认' }}</view>
					<view class="price1">{{ item.price }}</view>
					<view class="orginal1">{{ item.old_price }}</view>
					<view class="per1">{{ item.day_price }}元/天</view>
				</view>
				<view v-if="idx==0" class="top1">
					<view class="name1">最多人购买</view>
					<view class="time1">
			{{ msg }}
		</view>
				</view>
				
			</view>

		</view>
		<view class="bgap"></view>
	</view>

		<!-- <view class="block2">
			<view class="first">
				<view class="bar"></view>
				<text class="title">用户评价</text>
			</view>
			<view class="item2" v-for="(item,idx) in commentList" :key="idx">
				<view class="line1">
					<u-avatar :src="item.avatar" size="60"></u-avatar>
					<text class="name1">{{ item.name[0]+'**'+item.name[item.name.length-1] }}</text>
					<view class="tit1">
						<uni-icons color="#F6D98F" type="vip" size="26"></uni-icons>
						<text class="title1">{{ item.title }}</text>
					</view>
				</view>
				<view class="content1">
					{{ item.content }}
				</view>
			</view>
		</view> -->
	
		
		
		<view class="bottom">
			<view class="btn" @tap="pay">立即解锁</view>
		</view>


		<u-popup mode="center" border-radius="40" v-model="isShowPop">
        <view class="pop1">
           <view class="hu1">
			
		   </view>
		   <view class="posi1">
<view class="line7">是否要放弃订阅会员</view>
<view class="line8">
	优惠力度低至0.01/元/天
</view>
<view class="line8">倒计时{{msg}}</view>
			
		</view>
		   <view class="mt50 line9">
			<view class="btn8" @tap="jumpBack1">
				狠心放弃
			</view>
			<view class="btn9" @tap="pay">
				继续支付
			</view>
		   </view>
        </view>
    </u-popup>

	<u-popup mode="center" border-radius="0" v-model="isShowPop1">
			<u-image :src="src" width='500' height="500"></u-image>
    </u-popup>
	</view>
</template>

<script>
import payMethod from '@/utils/pay'
	export default {
		name:"subscribe",
    components:{},
		data() {
			return {
				src:'',
				timer2:null,
				statusbarHeight:0,
				isShowPop:false,
				isShowPop1:false,
				commentList:[
					
				],
				activeIdx:0,
				priceList:[],
				funcList:[
					{	
						name:'无限制AI消息回复',
						tip:'超级聪明的人工智能AI助理，消息秒回，升级VIP享无限畅聊',
					},
					{
						name:'累不死的AI打工人',
						tip:'你打工作帮你完成，查资料，写计划，写报告，想灵感，写总结统统搞定',
					},
					{
						name:'您的私人助理',
						tip:'学习，医疗，法律，旅游，翻译等生活问题都能随时化身专业的助手替您解决',
					},
				],
				timer:null,
				timer1:null,
				msg:'10:00:00',
				
				data:[],
				orderId:''
            }
		},
		onLoad() {
			// #ifndef H5
			this.statusbarHeight = uni.getStorageSync('statusBarHeight')
			// #endif
		},
		mounted() {
			// this.scroll()
			this.countDown()
			this.getData()
		},
		beforeDestroy(){
			clearInterval(this.timer2)
			this.timer2 = null
			clearInterval(this.timer1)
			this.timer1 = null
			clearInterval(this.timer)
			this.timer = null
		},
		destroyed() {
			// clearInterval(this.timer)
			this.timer = null
		},
		
		computed:{
			
		},
		methods: {
			jumpBack1(){
				uni.navigateBack({
					 delta: 1
				});
			},
			async pay(){
			
			
				var r = await payMethod.pay(this,{
					api:'marketOrderCreate',
					data:{
						setmeal_type:'vip',
						setmeal_id:this.priceList[this.activeIdx].id,
						buy_number:1
					}
				})
				
				if(r.isTimer){

					if(r.showPic){
						this.src = r.code_url
						this.isShowPop1 = true
					}
					// timer
					this.timer2 = setInterval(()=>{
						this.getResult()
					},2000)
				}else{
					this.getResult()
				}
			},
			async getResult(){
				const r = await this.$u.api.marketOrderResult({
					order_id:this.orderId
				})
				if(r){
					this.$u.toast('支付成功');
					uni.$emit('updateDataMy')
					uni.switchTab({
						url:'/pages/index/index'
					})
				}else{
					this.$u.toast('支付失败');
				}
			},
			showPop(){
				this.isShowPop = true
			},
			async getData(){
				const r = await this.$u.api.marketList()
				if(r){
					this.priceList = r.data
					this.priceList.forEach(item=>{
						let type = parseInt(item.duration_type)
						switch(type){
							case 1:
								item.perPrice = item.price
								break
							case 3:
								item.perPrice = (parseFloat(item.price)/30).toFixed(2)
								break
							case 5:
								console.log(item.price,(parseFloat(item.price/365)),'ssss')
								item.perPrice = (parseFloat(item.price/365)).toFixed(2)
								break
							
							
						}
						
						
					})
				}

			},
			choosePrice(idx){
				this.activeIdx = idx
			},
		countDown() {
			var maxtime = 10 * 60 * 60; // 
			this.timer1 = setInterval(()=>{
						if (maxtime >= 0) {
				let minutes = Math.floor(maxtime / 60 / 60);
				let seconds =  Math.floor((maxtime - (minutes*60*60)) / 60)
				let millSeconds = (maxtime - (minutes*60*60)) % 60
				
				if(minutes.toString().length<2) minutes = '0'+minutes
				if(seconds.toString().length<2) seconds = '0'+seconds
				if(millSeconds.toString().length<2) millSeconds = '0'+millSeconds
				this.msg = minutes + ":" + seconds + ":" + millSeconds;
				
			
					--maxtime;
				} else{
				clearInterval(this.timer1);
				
				}
			}, 1000/60);   
       
      },
     
			goBack(){
				this.isShowPop = true
			},
			scroll(){
				let scrollWidth = document.getElementById('scroll').scrollWidth
       
				this.timer = setInterval(()=>{
					if(scrollWidth>document.getElementById('scroll').scrollLeft + 400){
					
						document.getElementById('scroll').scrollLeft +=1
					}else{
						document.getElementById('scroll').scrollLeft = 0
					}
					
					
				},50)
				
			}
		}
	}
</script>

<style lang="scss" scoped>
.subscribe{
	.subscribe-back{
		width:100%;
		height: 100%;
		// background-image: url(/static/img/vip.png);
		// background-size: 180px 140px;
		// background-position: right top;
		// background-repeat: no-repeat;
	}
	.subscribe-posi{
		position: absolute;
		width: 180px;
		height: 140px;
		right: 0;
	}
	.subscribe-img{
		width:40px;
		height: 40px;
		border-radius: 50%;
		margin-right: 8px;
	}
	.flex{
		padding:24rpx;
		display: flex;
		color: #fff;
	}
	.text1{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		// width: 130rpx;
	}
	.flex1{
		display: flex;
		justify-content: center;
		flex: 1;
		font-size: 36rpx;
	}
	.right{
		color: #828694;
		font-size: 32rpx;
	}
	.blo2{
		display: flex;
		justify-content: center;
		padding: 20rpx;
		color:#828694;
	}
	.blo3{
		margin:0 20rpx;
		font-size: 24rpx;
		color:#828694;
	}
	.blo4{
		display: inline-flex;
		align-items: center;
		background: #2A2C3A;
		padding: 10rpx;
		border-radius: 60rpx;
		margin-left: 30rpx;
	}
	.block1{
		white-space: nowrap;
		overflow-x: auto;
		
	}
	.blo5{
		padding: 40rpx;
	}
	.lin1{
		color: #C4BBA6;
		font-size: 40rpx;
		font-weight: 800;
		margin:40rpx 0 16rpx;
	}
	.lin2{
		color: #C4BBA6;
		font-size: 30rpx;

	}
	.item1{
		margin-bottom: 30rpx;
	}
	.blo6{
		background: rgba(42,44,58,.5);
		margin:0rpx 24rpx 24rpx;
		border-radius: 20rpx;
		padding: 30rpx 24rpx 10rpx;
	}
	.text1{
		font-size: 36rpx;
		color:#fff;
		margin-bottom: 30rpx;
		white-space: nowrap;
	}
	.text2{
		font-size: 28rpx;
		color:#828694;
	}
	.blo7{
		padding: 60rpx 0 20rpx;
		position: relative;
		display: inline-flex;
		margin-right: 30rpx;
	}
	.box1{
		display: inline-flex;
		background-image: linear-gradient(#F2DF90, #ECC291);
		padding: 30rpx 40rpx;
		border-radius: 30rpx;
		color: #000;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.name1{
			font-size: 36rpx;
			font-weight: 500;
		}
		.price1{
			margin:0 20rpx;
			font-size: 60rpx;
			color: #D4372E;
		}
		.orginal1{
			text-decoration:line-through;
			color: #937353;
			font-size: 30rpx;
			margin: 10rpx 0;
		}
		.per1{
			color: #D4372E;
			font-size: 28rpx;
		}
	}
	.box2{
		display: inline-flex;
		background: #1E2037 !important;
		border: 1px solid #292E49 !important;
		padding: 30rpx 40rpx;
		border-radius: 30rpx;
		color: #fff;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.name1{
			font-size: 36rpx;
			font-weight: 500;
		}
		.price1{
			margin:0 20rpx;
			font-size: 60rpx;
			color: #EAC78F;
		}
		.orginal1{
			text-decoration:line-through;
			color: #9396A0;
			font-size: 30rpx;
			margin: 10rpx 0;
		}
		.per1{
			color: #9396A0;
			font-size: 28rpx;
		}
	}
	.top1{
		position: absolute;
		background:#E74F3A ;
		color: #fff;
		top: 0;
		left: 20rpx;
		padding: 4rpx 20rpx;
		border-radius: 20rpx;
		font-size: 28rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.name1{
			font-style: italic;
			font-weight: 600;
		}
		.time1{
			font-size: 34rpx;
		}
		
	}
	.bgap{
		width: 100%;
		height: 220rpx;
	}
	.bottom{
		background: #151828;
		bottom: 0;
		position: fixed;
		width: 100%;
		
		border-top-left-radius: 50rpx;
		border-top-right-radius: 50rpx;
		padding: 24rpx;
		padding-bottom: 50rpx;
		.btn{
			border-radius: 50rpx;
			background-image: linear-gradient(to top, #7CD887,#75CCD1);
			padding:30rpx;
			color:#000;
			font-size: 40rpx;
			font-weight: 500;
			text-align: center;
			
		}
		
	}
	.block2{
		padding: 30rpx 24rpx;
		.first{
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-direction: row;
		}
		.bar{
			width: 8rpx;
			height: 50rpx;
			background-image: linear-gradient(to top, #83D2EA,#79CDED);
			border-radius: 4rpx;
		}
		.title{
			font-size: 40rpx;
			color: #fff;
			margin-left: 30rpx;
		}
		.item2{
			padding: 30rpx 30rpx 0;
		}
		.line1{
			display: flex;
			align-items: center;
			justify-content: flex-start;
			padding: 16rpx 0;
			border-bottom: 1px solid #272734;
			color: #fff;
			.name1{
				font-size: 34rpx;
				margin:0 20rpx;

			}
			.tit1{
				padding: 8rpx 20rpx;
				background: #0F0D0D;
				border-radius: 40rpx;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				.title1{
					font-size: 30rpx;
					color: #F6D98F;
			}	
			}
			

		}
		.content1{
			padding: 20rpx 0;
			color: #A6A7B9;
			font-size: 30rpx;
			line-height: 50rpx;
			white-space: pre-wrap;
		}
	}
	.pop1{
		width: 600rpx;
		border: 1px solid #39353C;
		overflow: hidden;
		position: relative;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		background-image: linear-gradient(to right, #F4D4AF,#F4E9D5);
		
		.hu1{
			position:absolute;
			background: #2F313F;
			left: -20%;
			width: 140%;
			height: 600rpx;
			top: -300rpx;
			border-radius: 50%;
		}
		.posi1{
			
			top:0;
			position: absolute;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			
			.line7{
				font-size: 30rpx;
				display: inline-flex;
				padding: 14rpx 28rpx;
				color: #CC997F;
			background: #18181F;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			margin-bottom: 50rpx;
			}
			.line8{
				font-size: 40rpx;
				color: #F9EFAF;
				margin:4rpx 0;
				text-align: center;
			}
		}
		.mt50{
			margin-top: 260rpx;
			height: 300rpx;
		}
		.line9{
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: row;
			padding: 20rpx 0;
			color: #fff;
			font-size: 34rpx;
			.btn8{
				
				background: #EDC596;
				border-radius: 80rpx;
				border:1px solid #fff;
				padding: 20rpx 40rpx;
				margin-right: 30rpx;
			}
			.btn9{
				background-image: linear-gradient(to bottom, #E7B266,#ff8432);
		
				border-radius: 80rpx;
				border:1px solid #fff;
				padding: 20rpx 40rpx;
			}
		}
	}
	
}
@media screen and (min-width: 700px) {
	.btn{
		width: 660px;
	}
	
}

</style>
